<!-- 交互pie 饼图 -->
<template>
  <div ref="chart" style="width: 600px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  name: "DonutChart",
  setup() {
    const chart = ref(null);
    let myChart = null;

    // Initial data based on the image
    const chartData = [
      { value: 2000, name: "租赁产业现代化", label: "租赁产业现代化" },
      { value: 2000, name: "城市更新提升", label: "城市更新提升" },
      { value: 2000, name: "工程建设管理", label: "工程建设管理" },
      { value: 2000, name: "城市基础投资建设", label: "城市基础投资建设" },
      { value: 2000, name: "居民生活保障", label: "居民生活保障" },
      { value: 2000, name: "房地产市场发展", label: "房地产市场发展" },
      { value: 2000, name: "和美乡村建设", label: "和美乡村建设" },
    ];

    // Initialize the chart
    const initChart = () => {
      myChart = echarts.init(chart.value);

      const option = {
        title: {
          text: "2936",
          left: "center",
          top: "center",
          textStyle: {
            fontSize: 40,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Donut Chart",
            type: "pie",
            radius: ["40%", "70%"], // Donut chart (inner and outer radius)
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              formatter: "{b}\n{d}%",
              color: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: chartData.map((item) => ({
              value: item.value,
              name: item.label,
            })),
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
        color: [
          "#ff7f50",
          "#87cefa",
          "#da70d6",
          "#32cd32",
          "#6495ed",
          "#ff69b4",
          "#ba55d3",
        ], // Custom colors
      };

      myChart.setOption(option);

      // Add interactivity: Highlight on click
      myChart.on("click", (params) => {
        console.log("Clicked:", params.name, params.value);
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });

      myChart.on("mouseout", (params) => {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
    };

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

    return { chart };
  },
};
</script>

<style scoped>
/* Add any custom styles if needed */
</style>
